<template>
    <NavBar class="navBar">
      <template v-slot:left>
        <div class="back" @click="back">
          <img src="@/assets/img/common/back.svg" alt="">
        </div>
      </template>
      <template v-slot:center >
       <div class="titles">
          <div v-for="(item,index) in titles"
          :key="index"
        class="titles-item"
        :class="{active : index === currentIndex}"
        @click="handleCurIndex(index)">
          {{item}}
        </div>
       </div>
      </template>
    </NavBar>
</template>

<script>
// 导入的组件
import NavBar from '@/components/common/navbar/NavBar'
export default {
  data () {
    return {
      titles: ['商品', '参数', '评论', '推荐'],
      currentIndex: 0
    }
  },
  components: {
    NavBar
  },
  methods: {
    handleCurIndex (idx) {
      this.currentIndex = idx
      this.$emit('tabClick', idx)
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang='scss' scoped>
.navBar {
  background-color: #fff;
 .back img{
   margin-top: 10px;
 }
 .titles{
   display: flex;
   font-size: 13px;
   .titles-item {
     flex: 1 ;
   }
   .active{
    color: var(--color-high-text)
   }
 }
}
</style>
